<%--
  Created by IntelliJ IDEA.
  User: 23827
  Date: 2019/9/22
  Time: 21:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>centerPassword</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <link rel="stylesheet" href="../css/user/centerPassword.css" type="text/css">
    <!-- 引入bootstrap框架的样式文件 -->
    <link rel="stylesheet" href="../plugins/bootstrap/css/bootstrap.css" type="text/css">
</head>

<body>

<%@ include file="../common/nav2.jsp"%>


<!-- 第二层导航栏 -->

<!-- 第三层信息填写 -->
<div style="overflow: hidden;margin-top: 50px">
    <!-- 左边 -->
    <div id="left">
        <a href="${path}/edit/list" class="list-group-item active">
            实名认证
        </a>
        <a href="${path}/information/list"  class="list-group-item">信息完善</a>
        <a href="${path}/number/list" class="list-group-item">手机绑定</a>
        <a href="${path}/address/list" class="list-group-item">地址管理</a>
        <a href="${path}/password/list" class="list-group-item">密码管理</a>
    </div>
    <!-- 右边 -->
    <div class="right">
        <!-- 右边第一层 -->
        <div class="right-first">
            <h4 class="characters1">密码管理</h4>
            <%--<button type="button" class="btn btn-primary" class="right-first-button">取消修改</button>--%>
        </div>
        <!-- 右边第二层修改登录密码 -->
        <div>
            <p class="right-1">*</p>
            <p class="right-2">请输入当前登录密码</p><br><br><br>
            <input type="text" class="righttext-1" id="oldPassword">

        </div>

        <div>
            <p class="right-1">*</p>
            <p class="right-2">请设置新的密码</p><br><br><br>
            <input type="password" class="righttext-1" id="newPassword" onblur="getPassword()">
            <p class="characters2">建议您设置6~20位数字加字母的复杂密码，但是自己一定要记住哦！</p>
            <span class="error-tip" id="error-tip2"></span>
        </div>

        <div>
            <p class="right-1">*</p>
            <p class="right-2">请确认新的登录密码</p><br><br><br>
            <input type="password" class="righttext-1" id="newPass">

            </div>

        <div>
            <button type="button" class="btn btn-primary"
                    style="margin-left: 22px;margin-top: 30px;width: 280px;height: 40px;border:0px;background-color: #008FF4" id="btn">确认修改</button>
        </div>
        <div id="psw">

        </div>



    </div>
</div>
<%@ include file="../common/footer.jsp"%>
<script>
    var rootPath="http://localhost:8081/";

    $("#btn").click(function(){

        var oldPassword = document.getElementById("oldPassword").value;
        var newPassword=document.getElementById("newPassword").value;
        var newPass=document.getElementById("newPass").value;
        //控制台输出
        console.log(oldPassword);
        console.log(newPassword);
        console.log(newPass);

        var allData = {
            newPassword:newPassword,
            newPass:newPass,
            oldPassword:oldPassword
        };

            $.ajax({
                type: "post",
                url: rootPath+"password/update",
                dataType: "json",
                data: JSON.stringify(allData),
                contentType: "application/json; charset=utf-8",
                success:function(result){
                    if(oldPassword != newPassword && newPassword == newPass){
                        str2 ="<span id='text' style='margin-left: 20px;margin-top: 20px;color: green'> 修改成功! </span>";
                        $("#psw").html(str2);
                    }
                }
            });
    })

</script>

<script>
    // 判断密码
    function getPassword() {
        var newPassword = document.getElementById("newPassword").value;
        var passwordRegex = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
        document.getElementById("newPassword").placeholder='请输入新密码'
        if(newPassword.length==0){
            document.getElementById("error-tip2").innerText="新密码不能为空";
            document.getElementById("btn").disabled=true;
            document.getElementById("btn").style.cursor="auto";
        }else if(!(passwordRegex.test(newPassword))){
            document.getElementById("error-tip2").innerText="密码至少为8位且必须含有字母,数字";
            //让提交按钮不可用
            document.getElementById("btn").disabled=true;
            document.getElementById("btn").style.cursor="wait";
        }else{
            document.getElementById("error-tip2").innerText=null;
//            document.getElementById("sendButton").style.cursor="pointer";
            document.getElementById("btn").disabled=false;
            document.getElementById("btn").style.cursor="pointer";
        }
    }
</script>


<!-- bootstrap中的js插件依赖于jquery框架,所以必须先引入jquery的js文件 -->
<script src="../plugins/jquery/jquery.min.js"></script>
<!--引入bootstrap的js文件-->
<script src="../plugins/bootstrap/js/bootstrap.js"></script>
<%--<script src="${path}/js/client/register.js"></script>--%>
</body>

</html>
